<!--
 * @Description: 
 * @Version: 0.0
 * @Author: taosong
 * @Date: 2023-03-22 16:06:23
 * @LastEditors: taosong
 * @LastEditTime: 2023-04-03 14:41:36
-->
<template>
  <Layout>
    <Sider
      class="layout-sider"
      hide-trigger
    >
      <transition name="move-left">
        <Menu
          v-show="showMenu"
          width="200px"
        >
          <MenuItem
            to="/selectArea"
            name="1"
          >
            <Icon type="md-document" />
            省市区选择组件
          </MenuItem>
          <MenuItem
            to="/table"
            name="2"
          >
            <Icon type="md-document" />
            表格
          </MenuItem>
          <MenuItem
            to="/form"
            name="3"
          >
            <Icon type="md-document" />
            表单
          </MenuItem>
          <MenuItem
            to="/modal"
            name="4"
          >
            <Icon type="md-document" />
            对话框
          </MenuItem>
          <MenuItem
            to="/modalForm"
            name="5"
          >
            <Icon type="md-document" />
            对话框表单
          </MenuItem>
          <MenuItem
            to="/badge"
            name="6"
          >
            <Icon type="md-document" />
            徽标
          </MenuItem>
          <MenuItem
            to="/selectInput"
            name="7"
          >
            <Icon type="md-document" />
            选择输入框
          </MenuItem>
        </Menu>
      </transition>
    </Sider>
    <Layout>
      <Header class="layout-header">
        <Icon
          @click="showMenu = !showMenu"
          size="25"
          color="#fff"
          type="ios-arrow-back"
        />
      </Header>
      <Content class="layout-content">
        <router-view />
      </Content>
      <Footer class="layout-footer">Footer</Footer>
    </Layout>
  </Layout>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
const showMenu = ref(true)
</script>
<style>
.ivu-layout {
  height: 100%;
}
.ivu-menu {
  height: 100%;
}
.ivu-menu-item {
  height: 70px;
  display: flex;
  align-items: center;
}
.ivu-layout-content {
  padding-top: 20px;
}
</style>
